import React, { PureComponent } from 'react'
import { connect } from 'dva'
import { Form, Row, Col, Button, Input, Select, InputNumber, DatePicker, Table, message, } from 'antd'
import { Page, DataList } from 'components'
import moment from 'moment'

const FormItem = Form.Item

@Form.create()
@connect(({ ${namespace},<#list fields as field><#if (field.type=='DataList')> ${namespace}${field.name? cap_first},</#if></#list> loading }) => ({ ${namespace},<#list fields as field><#if (field.type=='DataList')> ${namespace}${field.name? cap_first},</#if></#list> loading }))
class EditPage extends PureComponent {

  render() {
    const { location, dispatch, loading, form,<#list fields as field><#if (field.type=='DataList')> ${namespace}${field.name? cap_first},</#if></#list> ${namespace}} = this.props

    const {${api},<#list fields as field><#if (field.type=='DataList')>${field.name}Combo,</#if></#list>}=${namespace}
    
    const {details}=${api}

    const { getFieldDecorator, validateFields, getFieldsValue, setFieldsValue, } = form
    
<#list fields as field>
<#if (field.type=='DataList')>
	const ${field.name}Props={
		dispatch,
		loading,
		filterItem:${namespace}${field.name? cap_first}.filterItem,
		dataSource:${namespace}${field.name? cap_first}.list,
		pagination:${namespace}${field.name? cap_first}.pagination,
		visible:${namespace}${field.name? cap_first}.visible,
		selectedRows:${namespace}${field.name? cap_first}.selectedRows,
		selectedRowKeys:${namespace}${field.name? cap_first}.selectedRowKeys,
		columns:[<#list field.columns as field>
		{
			title:'${field.title}',
			dataIndex: '${field.dataIndex}',
			key: '${field.dataIndex}',<#if (field.align)>
			align:'left',</#if><#if (field.render)>
			render:(text, record) => {
				return (text);
			}</#if>
		},</#list>
		],
		namespace:'${namespace}${field.name? cap_first}',
		multiple:false,
		filterItems:[<#list field.filters as filter>
			{
				type: '${filter.type}',
				label: '${filter.label}',
				target: '${filter.name}',
				tip: '輸入${filter.label}',
				key: '${filter.name}',
			},</#list>
		],
		modalProps:{
			title:'${field.label}列表',
			width:800,
		},
		onOk(keys,rows){
			setFieldsValue({ ${field.name}_id: keys.length==0 ? undefined : { key: keys[0], label: rows[0].${field.name} } });
		},
	}
</#if>
</#list>
    
    const add=()=>{
      details.push({id:(-details.length-1),code:null,name:null,cav:1,up:1,unit:'pcs',netWeight:0});
      mould.details=details;
      dispatch({type:'${namespace}/updateState',payload:{${api}:${api}}})
    }

    const remove=(record)=>{
      let removed=details.filter(item => item.id!=record.id)
      mould.details=removed;
      dispatch({type:'${namespace}/updateState',payload:{${api}:${api}}})
    }
    
    const save=()=>{
		validateFields(errors => {
			if (errors) {
				return
			}
			const data = {
				...getFieldsValue()
			}
			<#list fields as field><#if (field.type=='DataList')>
			data.${field.name}={"id":data.${field.name}_id.key}
			delete data.${field.name}_id
			</#if><#if (field.type=='DatePicker')>
			data.${field.name}=moment(data.${field.name}).format('YYYY-MM-DD')
			</#if></#list>
			data.details=details
			if(${api}.id){
				dispatch({type:'${namespace}/update',payload:data})
			}else{
				dispatch({type:'${namespace}/create',payload:data})
			}
			
		})
    }

	const columns=[<#list columns as field>
			{
				title:'${field.title}',
				dataIndex: '${field.dataIndex}',
				key: '${field.dataIndex}',<#if (field.align)>
				align:'left',</#if><#if (field.render)>
				render:(text, record) => {
					<#if (field.edit??)>
					return (<${field.edit} style={{width:'100%'}} defaultValue={<#if (field.edit=='DatePicker')>text?moment(text):moment()<#else>text</#if>} onBlur={e => record.${field.dataIndex}=<#if (field.edit=='Select')>e<#elseif (field.edit=='DatePicker')>moment(e).format('YYYY-MM-DD')<#else>e.target.value</#if>}/>)
					<#else>
					return (text);
					</#if>
				}</#if>
			},</#list>
			{
				title: '操作',
				width: 150,
				render: (text, record) => {
					return (<Button onClick={e=>remove(record)}>刪除</Button>)
				}
			}
		]

    return (
      <Page inner>
      	<Row>
        	<Col span={22}>
        	
        	</Col>
        	<Col span={2}>
        	<Button type="primary" onClick={save}>保存</Button>
        	</Col>
        </Row>
        <Form>
			<Row gutter={10}><#list fields as field>
				<#if (field.type=='DataList')>
				<Col span={10}>
					<FormItem label={'${field.label}'} hasFeedback labelCol={{ span: 7 }} wrapperCol= {{ span: 17 }}>
						{getFieldDecorator('${field.name}_id', {
							initialValue: ${api}.${field.name}_id==null?undefined:{key:${api}.${field.name}_id,label:${api}.${field.name}},
							<#if (field.required)>rules: [
								{
									required: true,
								},
							],</#if>
						})
						(
							<Select placeholder='${field.label}'
								optionFilterProp="children"
								filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
								showSearch
								labelInValue >
								{
									${field.name}Combo.map((item, index) => (
										<Select.Option key={item.value} value={item.value}>{item.title}</Select.Option>
									))
								}
							</Select>
						)
						}
					</FormItem>
				</Col>
				<Col span={2}>
					<Button type="primary" onClick={e => {dispatch({type:'${namespace}${field.name? cap_first}/query'});dispatch({ type:'${namespace}${field.name? cap_first}/showModal' })}}>更多</Button>
					<DataList {...${field.name}Props}/>
				</Col>
				<#else>
				<Col span={12}>
					<FormItem label={'${field.label}'} hasFeedback labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
						{getFieldDecorator('${field.name}', {
							initialValue: <#if (field.type=='DatePicker')>${api}.${field.name}?moment(${api}.${field.name}):moment()<#else>${api}.${field.name}</#if>,
							<#if (field.required)>rules: [
								{
									required: true,
								},
							],</#if>
						})(<${field.type} style={{width:'100%'}}/>)}
					</FormItem>
				</Col></#if></#list>
		 	</Row>
        </Form>
        <Row>
        	<Col span={22}>
        	
        	</Col>
        	<Col span={2}>
        	<Button type="primary" onClick={add}>新增</Button>
        	</Col>
        </Row>
        <Table pagination={false} rowKey={record => record.id} columns={columns} dataSource={details} />
        <Row>
        	<Col span={24}>
        	&nbsp;
        	</Col>
        </Row>
      </Page>
    )
  }
}
export default EditPage